<template>
    <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
            :type="type"
            :title="title"
            mode="base"
            :cancelText="cancelText"
            :confirmText="confirmText"
            :duration="2000"
            :before-close="true"
            @close="close"
            @confirm="confirm"
        >
            <div style="font-size: 26rpx; color: #6c6c6c">{{ content }}</div>
        </uni-popup-dialog>
    </uni-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    /**
     * 类型
     */
    type: { default: 'error' },
    /**
     * 显示
     */
    show: { default: false },
    /**
     * 顶部标题
     */
    title: { default: '提示' },
    /**
     * 中间内容
     */
    content: { default: '' },
    /**
     * 取消按钮文本（左按钮）
     */
    cancelText: { default: '取消' },
    /**
     * 确定按钮文本（右按钮）
     */
    confirmText: { default: '确定' }
})

const emit = defineEmits(['update:show', 'confirm'])
const popup = ref({} as any)

const open = () => {
    popup.value.open()
}

const close = () => {
    popup.value.close()
    if (props.show) emit('update:show', false)
}

const confirm = () => {
    emit('confirm')
}

watch(
    () => props.show,
    () => {
        if (props.show) open()
        else close()
    }
)
</script>
